<template>
    <div class="container_box" id="video_box" v-if="!token">
        <div class="login">暂无数据视频,请先登录!</div>
        <!--底部操作栏-->
        <TabBar></TabBar>
    </div>
    <div v-else class="container_box" id="video_box">
        <div class="van_swipe">
            <!--vant van-swipe 滑动组件 -->
            <van-swipe :show-indicators="false" @change="onChange" :touchable="touchable" vertical :loop="false"
                ref="swiper">
                <van-swipe-item v-for="item in videoList" :key="item.Id" class="product_swiper">
                    <div class="video_container">
                        <video class="video_box" webkit-playsinline="true" x5-playsinline="" x5-video-player-type="h5"
                            x5-video-player-fullscreen="" playsinline preload="auto" :playOrPause="playOrPause"
                            x-webkit-airplay="allow" x5-video-orientation="portrait" @click="pauseVideo"
                            @ended="onPlayerEnded($event)" loop muted>
                            <source :src="item.url" type="video/mp4" />
                            <source :src="item.url" type="video/quicktime" />
                        </video>
                        <!-- 播放暂停按钮 -->
                        <img v-show="iconPlayShow" class="icon_play" @click="playvideo" src="@/assets/play.png" />
                    </div>
                    <!-- 审核按钮 -->
                    <div class="button">
                        <div class="bottom_tab" @click="changeBut(item, 0)">
                            <span class="bottom_tab_span button_active">通过</span>
                        </div>
                        <div class="bottom_tab" @click="changeBut(item, 1)">
                            <span class="bottom_tab_span button_active">未通过</span>
                        </div>
                    </div>
                </van-swipe-item>
            </van-swipe>
            <!--底部操作栏-->
            <TabBar></TabBar>
            <!-- 遮罩层对话框 -->
            <van-dialog v-model="showDialog" title="备注" show-cancel-button @confirm="confirm" @cancel="cancel">
                <van-field v-model="valueInput" placeholder="请输入您的建议" />
            </van-dialog>
        </div>
    </div>
</template>
<script>
import TabBar from '../components/Tabbar.vue'
import { videoList, examine } from '@/api/api'
export default {
    name: "videoChild",
    components: {
        TabBar
    },
    data() {
        let u = navigator.userAgent;
        return {
            current: 0,
            showDialog: false,
            valueInput: '',
            input: '',
            isVideoShow: true,
            playOrPause: true,
            video: null,
            iconPlayShow: true,
            isAndroid: u.indexOf("Android") > -1 || u.indexOf("Adr") > -1,
            isiOS: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
            butIndex: 0,
            showShareBox: false,
            touchable: true,
            loveCount: 0,
            videoList: [],
            limit: 10,
            page: 1,
            total: '',
            examine: {},
            token: localStorage.getItem('token')
        };
    },
    methods: {
        // 获取视频列表
        getVideoList() {
            let obj = {
                limit: this.limit,
                page: this.page,
                token: localStorage.getItem('token')
            }
            videoList(obj).then(res => {
                if (res.code === 0) {
                    this.videoList = res.data.list
                    this.total = res.data.total
                } else {
                    this.$toast(res.msg)
                }
            })
        },
        // 触发审核是否通过
        changeBut(item, index) {
            this.examine = {
                id: item.id,
                token: localStorage.getItem('token')
            }
            if (item.status === '待审核') {
                this.$set(this.examine, 'status', 0)
            } else if (item.status === '审核通过-待上机') {
                this.$set(this.examine, 'status', 1)
            } else if (item.status === '审核驳回-修改中') {
                this.$set(this.examine, 'status', 2)
            } else if (item.status === '已上机') {
                this.$set(this.examine, 'status', 3)
            } else if (item.status === '放弃测试') {
                this.$set(this.examine, 'status', 4)
            } else if (item.status === '已修改-待审核') {
                this.$set(this.examine, 'status', 5)
            }
            if (index == 0) {
                this.examineVideo()
                this.valueInput = ''
            } else {
                this.showDialog = true
            }

        },
        // 点击对话框确认
        confirm() {
            this.$set(this.examine, 'note', this.valueInput)
            this.examineVideo()
            this.valueInput = ''
        },
        // 点击对话框取消
        cancel() {
            this.showDialog = false
        },
        //滑动改变播放的视频
        onChange(index) {
            // 没有更多数据
            if (this.total.length === null) {
                this.$toast('没有更多数据了')
                this.touchable = false
            }
            let video = document.querySelectorAll("video")[this.current];
            video.pause();
            this.playOrPause = false;
            this.current = index;
            if (this.isiOS) {
                //ios切换直接自动播放下一个
                this.isVideoShow = false;
                this.pauseVideo();
            } else {
                //安卓播放时重置显示封面。图标等
                this.isVideoShow = true;
                this.iconPlayShow = true;
            }
            let data = {
                limit: this.limit += 1,
                page: this.page++,
                token: localStorage.getItem('token')
            }
            // 第10页发起请求每次获取10条数据
            if (index === 9) {
                videoList(data).then(res => {
                    if (res.code === 0) {
                        this.videoList = this.videoList.concat(res.data.list)
                    } else {
                        this.$toast(res.msg)
                    }
                })
            }

        },
        // 播放视频
        playvideo() {
            let video = document.querySelectorAll("video")[this.current];
            // console.log(video.play());
            // console.log("playvideo：" + this.current);
            this.isVideoShow = false;
            this.iconPlayShow = false;
            video.play();
            window.onresize = function () {
                video.style.width = window.innerWidth + "px";
                video.style.height = window.innerHeight + "px";
            };
        },
        // 暂停播放
        pauseVideo() {
            //暂停\播放
            let video = document.querySelectorAll("video")[this.current];
            // console.log("pauseVideo" + this.current);
            if (this.playOrPause) {
                video.pause();
                this.iconPlayShow = true;
            } else {
                video.play();
                this.iconPlayShow = false;
            }
            this.playOrPause = !this.playOrPause;
        },
        onPlayerEnded() {
            //视频结束
            this.isVideoShow = true;
            this.current++;
            this.$refs.swipe.next()
        },
        // 是否审核通过
        examineVideo() {
            examine(this.examine)
                .then(res => {
                    if (res.code === 0) {
                        this.$refs.swiper.next()
                    } else {
                        this.$toast.fail('你没有权限')
                    }
                })
        }
    },
    created() {
        this.getVideoList()
    },
    mounted() {

    }
};
</script>
<style scoped>
.login {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.video-player {
    height: 100%;
    width: 100%;
}

.van_swipe {
    width: 100%;
    height: 100%;
}

.van-swipe {
    width: 100%;
    height: 100%;
}

.container_box {
    width: 100vw;
    height: 100vh;
}

.video_box {
    object-fit: cover;
    z-index: 999;
    /* width: 100%;
    height: 100%; */
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
}

video {
    object-position: 0 0;
}

.icon_play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    height: 60px;
    /* background: rgba(0, 0, 0, 0.5); */
    border-radius: 50%;
}

.play,
.platStart {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
}

/* 点赞，转发 */
.tools_right {
    z-index: 1001;
    position: absolute;
    right: 16px;
    bottom: 238px;
}

.tools_r_li {
    margin-bottom: 20px;
    color: #fff;
    font-size: 16px;
}

.tools_r_li:last-child {
    margin-bottom: 0px;
}

.icon_right {
    margin-bottom: 5px;
    font-size: 42px;
    display: block;
    text-shadow: 0px 0px 10px #9d9d9d;
    /*transition: .5s;*/
}

.production_box {
    z-index: 1001;
    position: absolute;
    /* right: 16px; */
    bottom: 54px;
    text-align: left;
    padding: 0 15px 15px 15px;
    color: #fff;
    width: 100%;
    left: 0;
    box-sizing: border-box;
    background: -webkit-linear-gradient(top,
            rgba(0, 0, 0, 0.2),
            rgba(0, 0, 0, 0));
    /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(top,
            rgba(0, 0, 0, 0.2),
            rgba(0, 0, 0, 0));
    /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(top,
            rgba(0, 0, 0, 0.2),
            rgba(0, 0, 0, 0));
    /* Firefox 3.6 - 15 */
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.2),
            rgba(0, 0, 0, 0));
    /* 标准的语法 */
}

.production_name {
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 10px;
    color: #fda085;
}

.production_des {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    min-height: 62px;
}

.production_des_i {
    font-style: normal;
    font-weight: 700;
    color: #fda085;
}

.production_top {
    display: inline-block;
    padding: 6px;
    margin-bottom: 5px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    margin-top: 5px;
}

.product_go {
    color: #fbdd21;
}

.production_title {
    margin-left: 4px;
}


.icon-shoucang {
    transition: 0.5s all;
}

.follow_active {
    color: #fda085;
    animation: showHeart 0.5s ease-in-out 0s;
}

@keyframes showHeart {
    0% {
        color: #f44;
        transform: scale(1);
    }

    25% {
        color: #fff;
        transform: scale(0);
    }

    80% {
        color: #f44;
        transform: scale(1.2);
    }

    100% {
        color: #f44;
        transform: scale(1);
    }
}

/*分享样式*/
.share_hover {
    position: fixed;
    display: none;
}

.share_box {
    position: fixed;
    bottom: -300px;
    width: 100%;
    z-index: 1002;
    background: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transition: 0.5s;
}

.share_tips {
    text-align: center;
    line-height: 38px;
    color: #333;
}

.share_ul {
    box-sizing: border-box;
    padding: 0 25px 25px;
    border-bottom: 1px solid #e8e8e8;
}

.share_li {
    float: left;
    width: 33%;
    text-align: center;
}

.share_li i {
    font-size: 22px;
}

.share_cancel {
    text-align: center;
    line-height: 48px;
    color: #777;
    text-align: center;
}

.pengyouquan {
    color: #47d000;
}

.pengyouquan_li {
    animation: rotating 8s linear infinite;
}

@keyframes rotating {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

.weixin {
    color: #20ca2e;
}

.lianjie {
    color: #cdcdcd;
}

.share_active {
    bottom: 0px;
}

.button {
    position: absolute;
    top: 0%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 50px;
    line-height: 50px;
    background-color: #11191f;
    z-index: 1000;
}

.button_active {
    border: none;
    color: #fff;
    opacity: 0.3;
}
</style>